<template>
    <edu-dialog title="选择课程" :visible.sync="visible" width="70%" @close="close"  @confirm="handleClick('COM')" :auto-height='true'>
        <div style="margin-bottom: 5px;">
             <el-radio-group v-model="activeLabel" @change="radioChange">
                <el-radio-button label="非公共选修课"></el-radio-button>
                <el-radio-button label="公共选修课"></el-radio-button>
            </el-radio-group>
            <el-input
                v-model.trim="searchValue"
                placeholder="请输入课程代码或课程名称"
                prefix-icon="el-icon-search"
                clearable
                style="width:250px; top:1px; left:5px"
                @change="searchTableData"
            />
        </div>
        <template v-if="activeLabel == '非公共选修课'">
            <div v-for="(value, key) in nonPubElectiveCourses" :key="key">
                <template v-if="value.length">
                    <h3 style="margin-top:16px">{{ key }}</h3>
                    <edu-table
                        :data="value"
                        :pagination="false"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column label="课程代码" prop="courseCode"></el-table-column>
                        <el-table-column label="课程名称" prop="courseName" show-overflow-tooltip></el-table-column>
                        <el-table-column label="开课学院" prop="facultyI18n" show-overflow-tooltip></el-table-column>
                        <el-table-column label="学分" prop="credits"></el-table-column>
                        <el-table-column label="课程类型" prop="labelName"></el-table-column>
                    </edu-table>
                </template>
            </div>
        </template>
        <template v-else>
            <div style="margin-top:16px">
                <edu-table
                    :data="pubElectiveCourses"
                    :pageNum="page.pageNum"
                    :pageSize="page.pageSize" 
                    :total="page.total" 
                    @page-change="pageChange"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column label="课程代码" prop="courseCode"></el-table-column>
                    <el-table-column label="课程名称" prop="courseName" show-overflow-tooltip></el-table-column>
                    <el-table-column label="开课学院" prop="facultyI18n" show-overflow-tooltip></el-table-column>
                    <el-table-column label="学期" prop="term" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column label="学分" prop="credits"></el-table-column>
                </edu-table>
            </div>
            <!-- <el-tabs v-model="activeName">
                <el-tab-pane
                    :label="key"
                    :name="key"
                    v-for="(value, key) in pubElectiveCourses"
                    :key="key"
                >
                    <edu-table
                        :data="value"
                        :pagination="false"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column label="课程代码" prop="courseCode"></el-table-column> 
                        <el-table-column label="课程名称" prop="courseName"></el-table-column>
                        <el-table-column label="学分" prop="creidits" width="60"></el-table-column>
                        <el-table-column label="精品类通识选修课" prop="jp"></el-table-column>
                        <el-table-column label="创新创设通识选修课">
                            <template slot-scope="scope">
                                <span>{{ scope.row.cx ? '是' : '否' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="艺术类通识选修课">
                            <template slot-scope="scope">
                                <span>{{ scope.row.ys ? '是' : '否' }}</span>
                            </template>
                        </el-table-column>
                    </edu-table>
                </el-tab-pane>
            </el-tabs> -->
        </template>
        <!-- <span slot="footer">
            <el-button @click="handleClick('CAN')">取消</el-button>
            <el-button type="primary" @click="handleClick('COM')">确定</el-button>
        </span> -->
    </edu-dialog>
</template>

<script>
import {
    queryNonPublicCourses,
    queryPublicCourses
} from 'common/src/api/internationalExchanges/creditApplication.js'
export default {
    name: 'courseSelect',
    props: {
        visible: {
            default: false,
            type: Boolean
        },
        studentInfo: {
            default: {},
            type: Object
        }
    },
    data() {
        return {
            activeLabel: '非公共选修课',
            activeName: '',
            nonPubElectiveCourses: {},
            nonPubElectiveCoursesCopy: {},
            pubElectiveCoursesCopy: [],
            pubElectiveCourses: [],
            multipleSelection: [],
            searchValue: '',
            page: {
                total: 0,
                pageNum: 1,
                pageSize: 20    
            },
        }
    },
    methods: {
        async queryCoursesData(params = this.activeLabel) {
            let request =
                params === '非公共选修课'
                    ? queryNonPublicCourses(this.studentInfo)
                    : queryPublicCourses(this.studentInfo.grade, {pageSize: this.page.pageSize, pageNum: this.page.pageNum, keyWord: this.searchValue})
            let { code, data } = await request
            if (code !== 200) return
            if (params === '非公共选修课') {
                data.planCourses.sort((x, y)=>{
	                    return y.semester - x.semester;
                })
                data.planCourses.forEach(ele => {
                    if (ele.course) ele.course.creidits = ele.course.credits
                })
                let planCourses = data.planCourses.reduce((pre, cur, index) => {
                    if (pre[cur.course.calendarName]) {
                        return {
                            ...pre,
                            [cur.course.calendarName]: [
                                ...pre[cur.course.calendarName],
                                ...[cur.course]
                            ]
                        }
                    } else {
                        return { ...pre, [cur.course.calendarName]: [cur.course] }
                    }
                }, {})
                this.nonPubElectiveCourses = planCourses
                this.nonPubElectiveCoursesCopy = _.cloneDeep(planCourses);
            } else {
                let list = data.list || [];
                list.forEach(item => {
                    item.creidits = item.credits;
                })
                this.pubElectiveCourses = list;
                this.page.total = data.total_ || 0;
                //this.pubElectiveCoursesCopy = _.cloneDeep(list);
                this.activeName = Object.keys(data)[0]
            }
        },
        radioChange(lab) {
            this.searchValue = '';
            this.queryCoursesData()
            this.multipleSelection.length = 0
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        close() {
            Object.assign(this.$data, this.$options.data());
            this.$emit('close')
        },
        handleClick(mode) {
            switch (mode) {
                case 'COM':
                    if (this.multipleSelection.length !== 1) {
                        this.$message({
                            type: 'warning',
                            message: '只能选择一门课程'
                        })
                        return
                    }
                    this.$emit('selectChange', this.multipleSelection)
                    Object.assign(this.$data, this.$options.data())
                    break
                case 'CAN':
                    Object.assign(this.$data, this.$options.data())
                    this.close()
                    break
            }
        },
        searchTableData() {
            if (this.activeLabel == '非公共选修课') {
                 _.each(this.nonPubElectiveCoursesCopy, (values, key) => {
                    this.nonPubElectiveCourses[key] = this.dealData(values);
                 });
            }else {
                this.page.pageNum = 1;
                this.queryCoursesData();
                //this.pubElectiveCourses = this.dealData(this.pubElectiveCoursesCopy);
            }
        },
        dealData(originData) {
            let value = originData.filter(item => {
                return item.courseCode.indexOf(this.searchValue) >-1 || item.courseName.indexOf(this.searchValue) >-1;
            })
            return value;
        },
        pageChange(val) {
            this.page.pageSize = val.pageSize;
            this.page.pageNum = val.pageNum;
            this.queryCoursesData();
        }
    }
}
</script>

<style>
</style>